// 设置头像照

<template>
  <div class="avatarBox">
    <div class="avatarTop">
      <img
        src="../../../images/fae98107-94c4-47d1-ab04-f3e21ba7d864.png"
        alt=""
        @click="goBackAvatar"
      />
      <b>为您设置一张证件照吧</b>
    </div>
    <img
      class="credentials"
      src="../../../images/tou.png"
      alt=""
      @click="showDrawer"
    />
    <a-drawer
      :placement="placement"
      :closable="false"
      :visible="visible"
      @close="onClose"
    >
      <button class="btn" @click="takePicture">拍一张</button>
      <button class="btn" @click="pat">从相册选择</button>
      <button class="btn" @click="onClose">取消</button>
    </a-drawer>
    <button class="wan" @click="pat1">完成设置</button>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";

const visible = ref(false);
const placement = ref("bottom");
const router = useRouter();
const pat1 = () => {
  router.go(-1);
};
const goBackAvatar = () => {
  router.go(-1);
};

const showDrawer = () => {
  visible.value = true;
};

const onClose = () => {
  visible.value = false;
};

const pat = (e) => {
  router.push("/Myimt");
};
const takePicture = async () => {
  router.push("/cameras");
};
</script>

<style lang="scss">
.touBox {
  width: 100%;
  height: 100%;
}
.avatarTop {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
}
.avatarTop b {
  font-size: 20px;
  padding-left: 40px;
}

.el-icon-back {
  font-size: 25px;
}
.credentials {
  margin: 0 0 20px 15px;
}
.wan {
  width: 90%;
  height: 50px;
  margin-left: 15px;
  background: #3087ea;
  color: #fff;
  border: none;
}
.ant-drawer-content-wrapper {
  height: 150px !important;
}
.btn {
  width: 100%;
  height: 30px;
  margin: 0 0 10px 0;
  font-size: 20px;
  color: #3589ea;
}
</style>
